<template>
  <v-flex xs12 sm10 md10 lg10>
    <v-card>
      <v-card-title><h3>{{$t('route.adminOverview')}}</h3></v-card-title>
      <v-divider></v-divider>
      <v-list>
        <v-list-tile>
          <span class="management-overview__table-header text--primary">{{$t('management.name')}}</span>
          <v-list-tile-content class="pl-3">
            <v-edit-dialog
              :return-value.sync="teamInfo.name"
              lazy
            >
              <div>{{ teamInfo.name }}</div>
              <v-text-field
                slot="input"
                :label="$t('management.editName')"
                v-model="teamInfo.name"
                single-line
                counter
                autofocus
                @keyup.enter="handleChange"
                :rules="[max20chars, nonull]"
              ></v-text-field>
            </v-edit-dialog>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile>
          <span class="management-overview__table-header text--primary">{{$t('management.teamCode')}}</span>
          <v-list-tile-content class="pl-3">
            <v-tooltip bottom>
              <v-chip class="secondary white--text" slot="activator">{{teamInfo.team_code}}</v-chip>
              <span>{{$t('management.teamCodeTt')}}</span>
            </v-tooltip>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile>
          <span class="management-overview__table-header text--primary">{{$t('management.years')}}</span>
          <v-list-tile-content class="pl-3">
            <v-radio-group @change="handleChange" v-model="teamInfo.years" row style="padding-top: 9px">
              <v-radio
                v-for="n in 3"
                :key="n"
                :label="(n+2)+'年'"
                :value="n+2"
                style="max-width: 65px"
              ></v-radio>
            </v-radio-group>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile>
          <span class="management-overview__table-header text--primary">{{$t('management.classes')}}</span>
          <v-list-tile-content class="pl-3">
            <v-edit-dialog
              :return-value.sync="bufferClasses"
              lazy
            >
              <div>{{ teamInfo.classes.join('，') }}</div>
              <v-text-field
                slot="input"
                :label="$t('management.editClasses')"
                v-model="bufferClasses"
                single-line
                counter
                autofocus
                @keyup.enter="handleChange"
              ></v-text-field>
            </v-edit-dialog>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile>
          <span class="management-overview__table-header text--primary">{{$t('management.allowJoin')}}</span>
          <v-list-tile-content class="pl-3">
            <v-switch
              hide-details
              :label="teamInfo.allow_join ? `已允许加入` : `已禁止加入`"
              @change="handleChange" v-model="teamInfo.allow_join" class="mt-2"
            ></v-switch>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-card>
  </v-flex>
</template>

<script>
import { fetchTeamInfo, updateTeamInfo } from '@/api/team'
import DynamicTagsInput from '@/components/DynamicTagsInput'
export default {
  components: { DynamicTagsInput },
  data: () => ({
    max20chars: (v) => v.length <= 20 || '名字太长',
    nonull: (v) => v.length > 0 || '请输入团队名',
    teamInfo: {
      name: '',
      team_code: '',
      years: 0,
      classes: [],
      allow_join: false
    },
    bufferClasses: ''
  }),
  watch: {
    bufferClasses(val) {
      this.teamInfo.classes = val.split(' ')
    }
  },
  methods: {
    handleChange() {
      if (!this.teamInfo.name) {
        this.teamInfo.name = '默认团队'
      }
      updateTeamInfo(this.$store.getters.team, this.teamInfo).then(res => {
        if (res.status === 200) {
          this.$notify.success(`修改成功`)
        }
      })
    }
  },
  created() {
    fetchTeamInfo(this.$store.getters.team).then(res => {
      this.teamInfo = res.data
    })
  }
}
</script>

<style scoped>
.management-overview__table-header {
  min-width: 80px;
}
</style>
